<template>
  <div>
    <!--  背景-->
    <div class="background"></div>
    <!--  返回-->
    <div class="back"><van-nav-bar
        title="星座速配"
        left-text="返回"
        left-arrow
        @click-left="goLeft"
    /></div>
    <!--  搜索-->
    <van-form @submit="onSubmit">
      <van-field
          v-model="men"
          name="men"
          label="男生星座"
          placeholder="填入男生星座如：金牛"
      />
      <van-field
          v-model="women"
          name="women"
          label="女生星座"
          placeholder="填入女生星座如：天秤"
      />
        <van-button round block type="info" native-type="submit">查询</van-button>
    </van-form>
    <!--  检索内容显示-->
    <div class="content" v-show="!(JSON.stringify(list) == '{}')">
      <div><span>{{list.men}}</span>&&<span>{{list.women}}</span></div>
      <div><span>恋爱类型：</span>{{list.jieguo}}</div>
      <div><span>两情相悦指数：</span>{{list.xiangyue}}</div>
      <div><span>配对指数：</span>{{list.zhishu}}</div>
      <div><span>配对比重：</span>{{list.bizhong}}</div>
      <div><span>爱情建议：</span>{{list.lianai}}</div>
      <div><span>注意事项：</span>{{list.zhuyi}}</div>
      <div><span>以上数据仅供参考</span></div>
    </div>
  </div>
</template>

<script>
import {constellation} from "@/api/expand";
import {Toast} from "vant";

export default {
  name: "Constellation",
  data(){
    return {
      list: {},
      playNum:0,
      men:'',
      women:'',
    }
  },
  methods: {
    //返回
    goLeft(){
      window.history.go(-1)
    },
    //提交
    onSubmit(values) {
      if(this.playNum<3){
        if(!(values.men=="" && values.women=="")){
          this.playNum++;
          constellation(values.men,values.women).then(res=>{
            if(res.reason=="success"){
              this.list=res.result
            }else if(res.reason=='错误的星座名称'){
              Toast.fail('错误的星座名称！');
            }else{
              Toast.fail('接口请求次数已达上限，请明日再来！');
            }
          })
        }else{
          Toast.fail('请输入要检索的星座！');
        }
      }else{
        Toast.fail('测试阶段，每日限用三次！');
      }
    },

  },


}
</script>

<style scoped lang="less">
//背景
.background {
  background-image: url("../assets/images/constellation.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.4;
}
.content {
  margin-bottom: 50px;
  >div {
    margin: 5px 10px;
    span {
      color: #3176c4;
    }
  }
  div:nth-of-type(1) {
    text-align: center;
    font-size: 20px;
  }
}
/deep/.van-button {
  width: 45px;
  height: 87px;
  position: absolute;
  z-index: 100;
  top: 47px;
  right: 0px;
  border-radius: 5px;
}
</style>